<template>
  <div>
    <img class="banner" 
      src="https://akk.028wkf.cn/kdb-weapp-img/stsj.png"
    
     mode="scaleToFill">
    <div class="inputDiv">
      <input
        class="topInput"
        type="text"
        placeholder="输入您的姓名"
        v-model="form.name"
      >
      <input
        class="topInput"
        type="text"
        placeholder="输入您的身份证号"
        v-model="form.idCard"
      >
    </div>
    <div class="updateImg" v-for="(item,index) in fileList" :key="index">
      <p class="title">{{item.title}}</p>
      <div class="imgBox">
        <div
          class="imgFor"
          v-for="(block,i) in item.parts"
          :key="i"
          @click="undateImgClick(block.fileName)"
        >
          <img
            v-if="form[block.fileName]"
            :src="form[block.fileName]"
            mode="scaleToFill"
            class="plusImg"
          >
          <div class="plusDiv" v-else>
            <img
              class="plusImg"
              src="https://akk.028wkf.cn/kdb-weapp-img/img/plus.jpg"
              mode="scaleToFill"
            >
          </div>
          <span class="tag">{{block.tag}}</span>
        </div>
      </div>
    </div>
    <div class="updateImg" v-for="(item,index) in fileList2" :key="index">
      <p class="title">{{item.title}}</p>
      <div class="imgBox">
        <div
          class="imgFor"
          v-for="(block,i) in item.parts"
          :key="i"
          @click="undateImgClick(block.fileName)"
        >
          <img
            v-if="form[block.fileName]"
            :src="form[block.fileName]"
            mode="scaleToFill"
            class="plusImg"
          >
          <div class="plusDiv" v-else>
            <img
              class="plusImg"
              src="https://akk.028wkf.cn/kdb-weapp-img/img/plus.jpg"
              mode="scaleToFill"
            >
          </div>
          <span class="tag">{{block.tag}}</span>
        </div>
      </div>
    </div>
    <button class="btn" @click="applyForClick">立即申请</button>
  </div>
</template>

<script>
import {} from '@/utils'
import { ADD_SHOP_CHANGE_APPLY_API, UPLOAD_IMAGE2 } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      fileList: [
        {
          title: '身份认证',
          parts: [
            {
              tag: '身份证正面',
              fileName: 'idCardImgPositive'
            },
            {
              tag: '身份证反面',
              fileName: 'idCardImgNegative'
            }
          ]
        }
      ],
      fileList2: [
        {
          title: '资质认证',
          parts: [
            {
              tag: '营业执照',
              fileName: 'license'
            }
          ]
        }
      ],
      form: {
        name: '',
        idCard: '',
        idCardImgPositive: '',
        idCardImgNegative: '',
        license: ''
      },
      hint: {
        name: '请输入姓名',
        idCard: '请输入身份证号码',
        idCardImgPositive: '请上传身份证正面',
        idCardImgNegative: '请上传身份证背面',
        license: '请输入营业执照'
      }
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    applyForClick () {
      const vm = this
      for (let key in vm.form) {
        if (!vm.form[key]) {
          vm.$toast(vm.hint[key])
          return false
        }
      }
      vm._addShopChangeApplyApi()
    },
    _addShopChangeApplyApi () {
      const vm = this
      let params = { ...vm.form }
      params.shopId = vm.$cookie.get('account').shopId
      params.shopIdentity = 'ENTITY'
      ADD_SHOP_CHANGE_APPLY_API(params)
        .then(r => {
          if (r.data.code === '0') {
            wx.showModal({
              title: '资料提交成功',
              content:
                '我们会在1-3个工作日内处理您的申请若有问题请致电400-888-5115',
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#5d93fd',
              success: function (res) {
                if (res.confirm) {
                  vm.$router.go(-1)
                }
              },
              fail: function (err) {
                console.error(err)
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    undateImgClick (fileName) {
      const vm = this
      UPLOAD_IMAGE2()
        .then(r => {
          let res = JSON.parse(r.data)
          if (res.code === '0') {
            vm.form[fileName] = res.data.imgPath
          } else {
            vm.$toast(res.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.banner {
  width: 100%;
  height: 130px;
}
.inputDiv {
  width: 95%;
  margin: auto;
  .topInput {
    font-size: 14px;
    width: 100%;
    border-bottom: 1px solid #e7e7e7;
    height: 50px;
    line-height: 50px;
  }
}
.updateImg {
  width: 95%;
  margin: auto;
  .title {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin: 10px 0;
  }
  .imgBox {
    margin: 30px 0;
    display: flex;
    .imgFor {
      width: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .plusImg {
        width: 80px;
        height: 80px;
      }
      .plusDiv {
        .plusImg {
          width: 80px;
          height: 80px;
        }
      }
      .tag {
        margin-top: 5px;
        font-size: 14px;
        color: #333;
      }
    }
  }
}
.btn {
  width: 88%;
  margin: 30px auto 40px;
  height: 40px;
  border-radius: 25px;
  color: #fff;
  background: #5c94fc;
  font-size: 14px;
  line-height: 40px;
}
</style>
